<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品详情</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* css代码 */
        html {
            /* 10÷16=62.5% */
            font-size: 62.5%;
        }

        body {
            font-size: 1.2rem;
        }

        tr:nth-child(even) {
            color: #239366;
            font-weight: bold;
        }

        tr:nth-child(even) td {
            padding-bottom: 4rem;
        }

        ::webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body style="background-color: #239a6b">
<div style="width: 90% ;margin: auto">
    <h1 style="color: white;font-size: 8rem;margin-top: 2rem">产品信息</h1>
    <p style="color: white;font-size: 3.4rem">PRODUCT INFORMATION</p>

    <div style="background-color: white;margin-top: 4rem;border-radius: 3rem;padding: 3rem 2rem">
        <table style="width: 100%;font-size: 5rem">
            <tr>
                <td colspan="2">企业名称</td>
            </tr>
            <tr>
                <td colspan="2" th:text="${productDetails.companyName}">宝鸡市天太山回想和土蜂蜜专卖有限公司</td>
            </tr>

            <tr>
                <td>企业品牌</td>
                <td>企业类型</td>
            </tr>
            <tr>
                <td th:text="${productDetails.enterpriseBrand}">群花山谷</td>
                <td th:text="${productDetails.typeOfEnterprise}">生产企业</td>
            </tr>
            <tr>
                <td>法人</td>
                <td>联系电话</td>
            </tr>
            <tr>
                <td th:text="${productDetails.legalPerson}">吕兵星</td>
                <td th:text="${productDetails.telephone}">13399173220</td>
            </tr>
            <tr>
                <td>产品名称</td>
                <td>产品分类</td>
            </tr>
            <tr>
                <td th:text="${productDetails.productName}">群花山谷精装蜂蜜</td>
                <td th:text="${productDetails.productCategory}">蜂蜜</td>
            </tr>
            <tr>
                <td>成分</td>
                <td>价格</td>
            </tr>
            <tr>
                <td th:text="${productDetails.ingredient}">油菜花</td>
                <td th:text="${productDetails.price}+'￥'">25.5￥</td>
            </tr>
            <tr>
                <td colspan="2">产品图片</td>
            </tr>
            <tr>
                <td class="proImages" colspan="2" style="width: 100%">
                    <div style="float: left;width: 47%;height: 30rem;padding: 1rem"
                         th:each="item,indexof : ${productDetails.productImages}">
                        <!--TODO  服务器所在 外网ip地址-->
                        <img alt="" height="100%" onclick="showMaxImg(this.src)" th:id="${indexof.index}"
                             th:src="'http://1.82.133.117:8083'+${item}" width="100%">
                    </div>
                </td>

            </tr>
        </table>
    </div>
</div>
<div id="maxImg" style="position: fixed;top: 0;left: 0;width: 100%;display: none">
    <div class="maxCss" style="display: flex;justify-content: center;align-content: center;align-items: center;padding: 0 1rem;
    background-color: black">
        <img id="img" src="" alt="" width="100%">
    </div>
</div>
<div style="text-align: center;margin-top: 6rem;color: white;font-size: 3rem">技术支持：陕西翼讯电子信息科技股份有限公司</div>
</body>
<script src="/static/vendor/jquery/jquery-3.3.1.min.js" type="application/javascript"></script>
<script>
    $(function () {
        $(".maxCss").css("height",$(window).height())

    })
    function showMaxImg(src) {
        $("#img").attr("src",src);
        $("#maxImg").show();
        $("#maxImg").height = document.body.clientHeight
        $('body').css('overflow','hidden')
    }
    $(".maxCss,#maxImg").click(function () {
        $("#maxImg").hide();
    })

</script>
</html>